// <component>-[type]-[attrtype]-<attr>-[status]

// 因为通过讨论 Tag 组件的选中态只针对于一个特定主题
// checked [false - default; true - primary]
@tag-default-background-color: @bg-color-component;
@tag-default-border-color: transparent;
@tag-default-hover-color: @brand-color-8;
@tag-default-click-color: @brand-color-9;
@tag-checked-color: @text-color-anti;
@tag-checked-background-color: @brand-color;
@tag-check-hover-bg: @bg-color-component-hover;
@tag-checked-hover-bg: @brand-color-hover;
@tag-default-click-bg: @bg-color-component-active;

// disabled
@tag-disabled-color: @text-color-disabled;
@tag-disabled-bg: @bg-color-component-disabled;

// dark color
@tag-primary-color: @brand-color;
@tag-success-color: @success-color;
@tag-warning-color: @warning-color;
@tag-danger-color: @error-color;

// light color
@tag-primary-color-light: @brand-color-light;
@tag-success-color-light: @success-color-1;
@tag-warning-color-light: @warning-color-1;
@tag-error-color-light: @error-color-1;

// plain
@tag-plain-background-color: @bg-color-component;

// font size
@tag-small-font-size: @font-size-s;
@tag-medium-font-size: @font-size-base;
@tag-large-font-size: @font-size-l;

// padding
@tag-small-padding: 0px @spacer;
@tag-medium-padding: 0px @spacer;
@tag-large-padding: 0px 12px;

// text color
@tag-text-color: @text-color-anti;
@tag-default-text-color: @text-color-primary;

// shape
@tag-border-radius-square: @border-radius;
@tag-border-radius-round: 12px;

// width
@tag-default-border-width: 1px;

// height
@tag-height-small: 20px;
@tag-height-medium: 24px;
@tag-height-large: 32px;

// line-height
@tag-line-height-small: (@tag-height-small - 2 * @tag-default-border-width);
@tag-line-height-medium: (@tag-height-medium - 2 * @tag-default-border-width);
@tag-line-height-large: (@tag-height-large - 2 * @tag-default-border-width);

// icon
@tag-icon-size: 16px;
@tag-close-icon-color:  @text-color-placeholder;
@tag-close-icon-hover-color: @text-color-primary;
@tag-close-icon-color--dark: @font-white-1;
@tag-close-icon-hover-color--dark: @font-white-2;

// link
@link-tag-hover-bg: @bg-color-component-hover;
@link-tag-hover-color: @brand-color-8;
@link-tag-active-bg: @bg-color-component-active;
@link-tag-active-color: @brand-color-9;
